import { Component, Input, OnInit} from '@angular/core';
import { PageModalService } from 'src/app/shared/service/page-modal-service';


@Component({
    selector: 'app-fold-list',
    templateUrl: './fold-list.component.html',
    styleUrls: ['./fold-list.component.scss']
})
export class FoldListComponent implements OnInit {
    @Input() tagData: any;
    show = false;
    startHeight: any;
    constructor(
        private pageModalService: PageModalService,
    ) {}

    ngOnInit() {
        if (this.tagData.data.data[0].showBtnImg) {
            if (this.tagData.data.data[0].showDownImg) {
                this.tagData.data.data[0].showBtnImg = this.tagData.data.data[0].showDownImg;
            }
            setTimeout(() => {
                let dropdownMenuEl = document.querySelector('.fold-content');
                let domDiv = document.querySelector('#firstRowLeft');
                if (domDiv) {
                    if (this.tagData.data.data[0].sliceNumber) {
                        this.startHeight = dropdownMenuEl['style'].height = (domDiv.scrollHeight + 12) * (this.tagData.data.data[0].sliceNumber)/2 + 12 + 'px';
                    } else {
                        this.startHeight = dropdownMenuEl['style'].height = (domDiv.scrollHeight + 12) * 4 + 12 + 'px';
                    }
                }
            }, 0);
        }
    }

    showAll (item) {
        this.show = !this.show;
        if (!this.show) {
            let dropdownMenuEl = document.querySelector('.fold-content');
            let domDiv = document.querySelector('#firstRowLeft');
            if (item.showUpImg) {
                item.showBtnImg = item.showDownImg;
            }
            if (item.sliceNumber) {
                dropdownMenuEl['style'].height = (domDiv.scrollHeight + 12) * (item.sliceNumber)/2 + 12 + 'px';
            } else {
                dropdownMenuEl['style'].height = (domDiv.scrollHeight + 12) * 4 + 12 + 'px';
            }

        } else {
            if (item.showDownImg) {
                item.showBtnImg = item.showUpImg;
            }

            setTimeout(() => {
                let dropdownMenuEl = document.querySelector('.fold-content');
                dropdownMenuEl['style'].height = 'auto';
                
                const { height } = dropdownMenuEl.getBoundingClientRect();
                dropdownMenuEl['style'].height = this.startHeight;
                console.log(this.startHeight);
                dropdownMenuEl.getBoundingClientRect();
                dropdownMenuEl['style'].transition = 'all 0.3s';
                dropdownMenuEl['style'].height = height + 'px';
            }, 0);
        }

    }

    openPage(link) {
        if (link) {
          this.pageModalService.openPage(link);
        }
    }
}

